<template>
  <div class="bg_a">
    <div class="bg_con">
        <div class="top_head" style="z-index: 9; left: 0;">
            <span>公共资源交易总体数据分析</span>
        </div>
        <div class="box_pad" style="margin-top: -30px;">
            <div class="clear">
                <div class="box_left">
                    <div class="item_k">
                        <div class="item_tit">
                            <i class="shan"></i>
                            <p>2019年项目成交数量分析</p>
                        </div>
                        <div class="item_main">
                            <EchartBarF height="235px" />
                        </div>
                    </div>
                    <div class="item_k mT15">
                        <div class="item_main">
                            <div class="item_tit">
                                <i class="shan"></i>
                                <p>2019年交易项目标段(分包)数量分析</p>
                            </div>
                            <div class="item_main">
                                <EchartBarF height="235px" :color="['#f8befc', '#494acf']" />
                            </div>
                        </div>
                    </div>
                    <div class="item_k mT15">
                        <div class="item_tit">
                            <i class="shan"></i>
                            <p>2019年交易统计（笔数）</p>
                        </div>
                        <div class="tubiao">
                            <EchartLineC height="225px" />
                        </div>
                    </div>
                </div>
                <div class="box_right">
                    <div class="item_k">
                        <div class="item_tit">
                            <i class="shan"></i>
                            <p>用户注册</p>
                        </div>
                        <div class="item_main">
                            <EchartBarG height="235px" />
                        </div>
                    </div>
                    <div class="item_k mT15">
                        <div class="item_tit">
                            <i class="shan"></i>
                            <p>用户注册排名</p>
                        </div>
                        <div class="item_main">
                            <EchartBarH height="235px" />
                        </div>
                    </div>
                    <div class="item_k mT15">
                        <div class="item_tit">
                            <i class="shan"></i>
                            <p>招标文件下载量 145万（次）</p>
                        </div>
                        <div class="item_main pL10">
                            <div class="tubiao" style="width:100%;height:225px;">
                                <div class="tu_bg">
                                    <div class="tu_bg_a spin"></div>
                                    <div class="tu_bg_a1 spina"></div>
                                </div>
                                <EchartPieE height="100%" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box_center">
                    <ul class="ul_b clear">
                        <li>
                            <div class="top_box">
                                <p>完成项目</p>
                                <span>22248个</span>
                            </div>
                        </li>
                        <li>
                            <div class="top_box">
                                <p>成交金额</p>
                                <span>1958.99亿元</span>
                            </div>
                        </li>
                        <li>
                            <div class="top_box">
                                <p>标书下载量</p>
                                <span>145万次</span>
                            </div>
                        </li>
                    </ul>
                    <EchartMapA height="470px" />
                    <div class="clear bottom_c">
                        <div class="bottom_c_l">
                            <div class="item_k">
                                <div class="item_tit">
                                    <i class="shan"></i>
                                    <p>近三年交易项目数量分析</p>
                                </div>
                                <div class="item_main">
                                    <EchartBarF height="225px" :color="['#b8a3ff', '#ff40cb']" />
                                </div>
                            </div>
                        </div>
                        <div class="bottom_c_r">
                            <div class="item_k">
                                <div class="item_tit">
                                    <i class="shan"></i>
                                    <p>近三年交易金额分析</p>
                                </div>
                                <div class="item_main">
                                    <EchartBarF height="225px" :color="['#5cfef7', '#2dd7ff']" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import EchartBarF from '@/components/echarts/echart_barF'
import EchartLineC from '@/components/echarts/echart_lineC'
import EchartBarG from '@/components/echarts/echart_barG'
import EchartBarH from '@/components/echarts/echart_barH'
import EchartPieE from '@/components/echarts/echart_pieE'
import EchartMapA from '@/components/echarts/echart_mapA'

export default {
    components: {
        EchartBarF,
        EchartLineC,
        EchartBarG,
        EchartBarH,
        EchartPieE,
        EchartMapA,
    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style lang="less" scoped>
.bg_a{background: url(~@/assets/images/background/vis_bg5.jpg) no-repeat center top; background-size:100% 100%;}
.bg_con { width: 1920px; height: 1080px; position: relative; display: inline-block; text-align: left;}
.top_head{position: absolute;width: 100%; height: 120px; background: url(~@/assets/images/dataAnalysis/head_top_bg.png) no-repeat center top;}
.top_head span{display: block;text-align:center;font-size: 36px;color: #fff;font-weight: 400;background-image: -webkit-linear-gradient(top,#fff,#c8ffff);-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 70px;letter-spacing: 4px;}
.box_pad{padding: 0px 16px; position: relative;top: 100px;}
.box_left{width: 30%; float: left;}
.box_right{width: 30%; float: right;}
.item_tit {height: 30px; line-height: 30px; position: relative; background: url(~@/assets/images/dataAnalysis/title_border.png) no-repeat 8px bottom;}
.item_tit i{display: block;position: absolute;width: 20px; height: 20px; background: url(~@/assets/images/dataAnalysis/title_dian.png) no-repeat center center;}
.item_tit p{font-size: 18px; line-height: 20px; display: inline-block; margin-left: 40px; color: #fff; }
.shan{ animation: 2s linear 0s normal infinite running shan;}
@keyframes shan {
	0% {
		transform: scale(0.8,0.8) ;
		opacity: 0.5;
	}
	50% {
		transform: scale(1,1);
		opacity: 1;
	}
	100% {
		transform: scale(0.8,0.8);
		opacity: 0.5;
	}
}

.tubiao{position: relative;}
.tu_bg{position: absolute; width: 70%; overflow: hidden; height: 100%; background: url(~@/assets/images/dataAnalysis/ec_bg_a.png) no-repeat center center;background-size:200px auto ;}
.tu_bg_a{position: absolute;width: 100%; height: 100%; background: url(~@/assets/images/dataAnalysis/ec_bg_a1.png) no-repeat center; background-size:200px auto;}
.tu_bg_a1{position: absolute;width: 100%; height: 100%; background: url(~@/assets/images/dataAnalysis/ec_bg_a2.png) no-repeat center; background-size:200px auto;}
.spin { animation: 3s linear 0s normal infinite running spin;}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
.spina { animation: 3s linear 0s normal infinite running spina;}
@keyframes spina {
	0% {
		transform: rotate(359deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

.box_center{position: absolute; width: calc(40% - 64px); left: calc(30% + 32px); top: 55px;}
.ul_b{width: 100%; padding:0px 10px; position: relative; z-index: 9; box-sizing: border-box; top: -20px;}
.ul_b li{width: 33.3%; float: left;padding:0px 8px ;box-sizing: border-box;}
.top_box{border: 1px solid #1a8fda; background: url(~@/assets/images/dataAnalysis/bg_ge.png) repeat; border-radius: 5px;box-sizing: border-box;padding: 8px 14px;}
.top_box p{font-size: 16px; color: #5cebff;padding-bottom: 4px; margin-bottom: 0;}
.top_box span{color: #fff; font-size: 25px; font-family: Digiface;}

.bottom_c{width: 100%; position: absolute; top: 505px;}
.bottom_c_l{width: 50%; box-sizing: border-box;padding-right: 6px; float: left;}
.bottom_c_r{width: 50%; box-sizing: border-box;padding-left: 6px;float: left;}
</style>